<template>
  <!-- 选择部门数据(树形结构) -->
  <el-row v-show="showTree" class="treeBox">
    <!-- 关闭按钮 -->
    <i class="el-icon-close" @click="$emit('update:showTree', false)"></i>
    <el-tree
      :data="treeData"
      :props="{ label: 'name' }"
      @node-click="selectNode"
    />
  </el-row>
</template>

<script>
// 导入格式化时间的函数 => 框架已经定义好的
import { getDepartments } from '@/api/departments'
import { formatTreeData } from '@/utils/index'
export default {
  name: 'ElDepSelect',
  props: {
    // 控制部门选择是否显示
    showTree: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 部门选择数据
      treeData: []
    }
  },
  created () {
    // 页面一创建就获取树形结构数据
    this.getTreeData()
  },
  methods: {
    // 获取部门树形结构数据
    async getTreeData () {
      const { depts } = await getDepartments()
      console.log('部门数据', depts)
      this.treeData = formatTreeData(depts)
    },
    // 点击选择部门
    selectNode (node) {
      /**
       * 1. node 当前点击选择的部门数据 => 子传父
       * 2. 关闭该子组件
       */
      this.$emit('current-select', node)
      // this.$emit('close-dept')
      // 父组件属性 加了 .sync 以后，可以少定义一个子传父自定义事件
      this.$emit('update:showTree', false)
    }
  }
}
</script>

<style lang='scss' scoped>
.treeBox {
  position: relative;
  width: 245px;
  margin-top: 10px;
  padding-top: 15px;
  border: 1px solid #eee;
}
.el-icon-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 100;
  font-size: 16px;
  cursor: pointer;
}
</style>
